<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>AI旅行助手</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <style>
        /* 添加iframe样式 */
        .main-iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
        /* 首页样式 */
        .home-container {
            padding: 20px;
            text-align: center;
        }
        .home-title {
            font-size: 24px;
            margin-bottom: 20px;
            color: #333;
        }
        .home-image {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        .home-description {
            margin-top: 20px;
            font-size: 16px;
            color: #666;
            line-height: 1.6;
        }
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">AI旅行助手</div>
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>

            <li class="layui-nav-item layui-hide-xs">
                <a href="javascript:;" >首页</a>
            </li>
            <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">旅行规划</a></li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
                    用户
                </a>
                <dl class="layui-nav-child">
<!--                    <dd><a href="">个人中心</a></dd>-->
<!--                    <dd><a href="">系统设置</a></dd>-->
                    <dd><a href="login.html">退出登录</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item">
                    <a class="" href="javascript:;">旅行预约</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" data-url="AI.html" class="nav-link">AI智能助手</a></dd>
                        <dd><a href="javascript:;">机票预订</a></dd>
                        <dd><a href="javascript:;">酒店预订</a></dd>
                        <dd><a href="javascript:;">景点门票</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">旅行管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;"data-url="viewport.html" class="nav-link" >我的行程</a></dd>
                        <dd><a href="javascript:;">订单管理</a></dd>
                        <dd><a href="javascript:;">旅行日志</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="javascript:;">旅行工具</a></li>
                <li class="layui-nav-item"><a href="javascript:;">帮助中心</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 默认显示首页内容 -->
<!--        <div id="home-content" class="home-container" data-url="viewport.html">-->
<!--            <h1 class="home-title">欢迎使用AI旅行助手</h1>-->
<!--            <img src="./image/photo.jpg"-->
<!--                 alt="旅行图片" class="home-image">-->
<!--            <p class="home-description">-->
<!--                我们为您提供专业的旅行规划服务，点击左侧菜单中的"AI智能助手"开始您的旅行规划之旅！-->
<!--            </p>-->
<!--        </div>-->
        <!-- iframe容器，初始隐藏 -->
        <iframe id="main-iframe" class="main-iframe" src="homepage.html" frameborder="0" style="display: block;"></iframe>
    </div>

    <div class="layui-footer">
        © 2025 AI旅行助手 - 提供专业的旅行规划服务
    </div>
</div>
<script src="./layui/layui.js"></script>
<script>
    //JS
    layui.use(['element', 'layer', 'util'], function(){
        var element = layui.element
            ,layer = layui.layer
            ,util = layui.util
            ,$ = layui.$;

        // 导航菜单点击事件
        $('.nav-link').on('click', function(){
            var url = $(this).data('url');
            $('#home-content').hide(); // 隐藏首页内容
            $('#main-iframe').attr('src', url).show(); // 显示并加载iframe
        });

        // 首页链接点击事件
        $('#home-link').on('click', function(){
            $('#main-iframe').hide(); // 隐藏iframe
            $('#home-content').show(); // 显示首页内容
        });

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function(othis){
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            ,menuRight: function(){
                layer.open({
                    type: 1
                    ,content: '<div style="padding: 15px;">面板</div>'
                    ,area: ['260px', '100%']
                    ,offset: 'rt' //右上角
                    ,anim: 5
                    ,shadeClose: true
                });
            }
        });
    });
</script>
</body>
</html>